import React, { Component } from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import {
	Form, Input, Button, Upload, Icon, Row, Col,
	Radio, message, Switch, Menu, Modal, Tooltip, Divider,
} from "antd";
import { ChromePicker } from "react-color";
import styles from "../index.less";
import Editor from "@/utils/Editor";
import LeftStyles from "@/pages/Account/accessSettings/index.less";
import {
	getSiteTagList,
	postSiteTagAdd,
	postsiteTagEdit,
	postSiteTagDel,
	postSiteTagMove,
	getSiteTagQuestionList,
	postSiteTagQuestionAdd,
	postSiteTagQuestionEdit,
	postSiteTagQuestionDel,
	postSiteTagQuestionMove,
	getSiteTagQuestionInfo,
} from "@/services/geographic";

import winSizeBig from "@/assets/accessSettings/默认大窗口.png";
import winSizeSmall from "@/assets/accessSettings/默认小窗口.png";

const CustomRadio = ({
	id = null,
	name = null,
	value = null,
	content = null,
	valueKey = null,
	labelStyle = {},
	assistStyle = {},
	onChange = null,
}) => {
	const handleChange = (e) => {
		if (onChange) {
			onChange(value);
		}
	};

	return (
		<label
			className={styles.labelWrapper}
			style={labelStyle}
			onChange={handleChange}
		>
			<input type='radio' id={id} name={name} value={value} checked={valueKey == value} />
			<div>
				<span>{content}</span>

				{id == 'style1' ? <span className={styles.style1} style={{ background: valueKey == value ? '#3E5BFF' : '#E5E5E5' }}></span> : null}
				{id == 'style2' ? <span className={styles.style2} style={{ background: valueKey == value ? '#3E5BFF' : '#E5E5E5' }}></span> : null}
				{id == 'style3' ? <span className={styles.style3} style={{ background: valueKey == value ? '#3E5BFF' : '#E5E5E5' }}></span> : null}
			</div>
		</label>
	);
};

class LeftAppearance extends Component {
	constructor(props) {
		super(props);
		this.state = {
			headPath: "",
			userHeadImg: "",
			kefuHeadImg: "",
			displayColorPicker: false,
			webWinColor: "#169bd5",
			winLogo: "",
			entranceLogo: "",
			id: "",
			rightMessage: "",
			leftTagTree: [],
			siteTagVisible: false,
			siteTagQuestionVisible: false,
			tagId: "",
			tagName: "",
			selected: [],
			problemsLink: 1,
			questionName: "",
			linkName: "",
			linkHrefName: "",
			questionId: "",
			questionMove: {
				id: "",
			},
			questionIndex: "",
			questionList: [],
			bubbleStyle: 1,
			winColor: "#169bd5",
      loginLogo:""
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		}
	}

	initData = (data) => {
		let { voiceType } = this.state;
		let obj = {
			robotNickname: data.robotNickname,
			solveFlag: data.solveFlag,
			showFlag: data.showFlag,
			isSimilar: data.isSimilar,
			winSize: data.winSize,
			voiceEnable: data.voiceEnable,
			sideShow: data.sideShow,
			style: data.bubbleStyle ? data.bubbleStyle : "1",
			voiceEnable: data.voiceEnable,
			isSimilar: data.isSimilar,
			winTitle: data.winTitle,
      loginHeadline:data.loginHeadline,
      loginSubtitle:data.loginSubtitle,
      loginDescription:data.loginDescription
		};
		if (data.voiceList) {
			data.voiceList.map((item) => {
				if (item.voiceType == 0) {
					obj.wxAppId = item.appId;
					obj.wxAppKey = item.appKey;
					voiceType.wxAppId = item.appId;
					voiceType.wxAppKey = item.appKey;
				}
				if (item.voiceType == 1) {
					obj.qyWxAppId = item.appId;
					obj.qyWxAppKey = item.appKey;
					voiceType.qyWxAppId = item.appId;
					voiceType.qyWxAppKey = item.appKey;
				}
			});
		}

		this.setState(
			{
				webWinColor: data.webWinColor,
				winLogo: data.winLogo,
				headPath: data.headPath,
				userHeadImg: data.userHeadImg,
				kefuHeadImg: data.kefuHeadImg,
				rightMessage: data.rightMessage,
				bubbleStyle: data.bubbleStyle ? data.bubbleStyle : "1",
				voiceSetUp: data.voiceList && data.voiceList.length > 0 ? true : false,
				voiceType,
				winColor: data.winColor ? data.winColor : '#169bd5',
        loginLogo:data.loginLogo
			},
			() => {
				this.props.form.setFieldsValue(obj);
				this.getSiteTag();
			}
		);
	};

	normFile = (e) => {
		if (Array.isArray(e)) {
			return e;
		}
		return e && e.fileList;
	};

	handleChangeImage = (file, type) => {
		if (file.file.status === "done") {
			this.setState({
				[type]: file.file.response.url,
			});
		}
	};

	/**
	 * 上传图片前判断
	 * @returns {*}
	 */
	beforeUpload = (file) => {
		let b = /\.(png|jpg|gif)$/;
		let a = file.name.toLowerCase();

		const pig = b.test(a);
		const isJPG = file.type;
		const isLt2M = file.size / 1024 / 1024 < 2;

		if (!pig) {
			if (!isLt2M) {
				message.error(formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.error.imageSize2M' }));
			} else {
				message.error(formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.error.imageFormat' }));
			}
		} else {
			if (!isLt2M) {
				message.error(formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.error.imageSize2M' }));
			}
		};
		return isJPG && isLt2M && pig;
	};

	handleColorPick = () => {
		let { displayColorPicker } = this.state;
		this.setState({
			displayColorPicker: !displayColorPicker,
		});
	};

	/**
	 * 获取表单数据
	 * @returns {*}
	 */
	getFormData = () => {
		const { form, isllmCustom } = this.props;
		let info = form.getFieldsValue();
		info.rightMessage = isllmCustom == 1 ? null : this.ueditor.getUeditorContent();
		return info;
	};

	/**
	 * 侧边栏-标签列表
	 */
	getSiteTag = async () => {
		const { applicationId } = this.props;
		const { selected } = this.state;
		let id = selected.length > 0 ? selected[0].split("-")[0] : null;
		let res = await getSiteTagList({ robotId: applicationId });
		// console.log(res);
		if (res) {
			let tagIds = res.map((e) => e.id);
			this.setState(
				{
					leftTagTree: res,
					selected: id
						? [id + "-" + tagIds.indexOf(id)]
						: res.length > 0
							? [res[0].id + "-0"]
							: [],
					tagId: id ? id : res.length > 0 ? res[0].id : null,
				},
				() => this.getQuestionList()
			);
		}
	};

	addSiteTag = () => {
		this.setState({ siteTagVisible: true, tagId: null });
	};

	siteTagCancel = () => {
		this.setState({ siteTagVisible: false, tagName: "" });
	};

	addTag = (e) => {
		this.setState({ tagName: e.target.value });
	};

	editTag = (item) => {
		this.setState({
			tagName: item.tagName,
			tagId: item.id,
			siteTagVisible: true,
		});
	};

	siteTagDel = async () => {
		const { selected } = this.state;
		let res = await postSiteTagDel({ id: selected[0].split("-")[0] });
		console.log(res);
		if (res.msg === formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.success.operation' })) {
			message.info(res.msg);
			this.setState({ selected: [] }, () => this.getSiteTag());
		}
	};

	tagMove = async (type) => {
		const { leftTagTree, selected } = this.state;
		if (leftTagTree.length == 0) {
			message.error(formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.error.noDataMove' }));
			return false;
		}
		let tagIds = leftTagTree.map((e) => e.id);
		let id = selected[0].split("-")[0];
		let index = tagIds.indexOf(id);
		if (index == 0 && !type) {
			message.error(formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.error.alreadyFirst' }));
			return false;
		} else if (index == tagIds.length - 1 && type) {
			message.error(formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.error.alreadyLast' }));
			return false;
		}
		let obj = { id, targetId: type ? tagIds[index + 1] : tagIds[index - 1] };
		let res = await postSiteTagMove(obj);
		console.log(res);
		if (res.msg === formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.success.operation' })) {
			message.info(res.msg);
			this.getSiteTag();
		}
	};

	menuSelect = (item) => {
		this.setState({ selected: [item.key], tagId: item.key.split("-")[0] }, () =>
			this.getQuestionList(true)
		);
	};

	tagSubmit = async () => {
		const { tagName, tagId } = this.state;
		const { applicationId } = this.props;
		let res = { data: false, msg: formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.error.operationFailed' }) };
		if (tagId) {
			res = await postsiteTagEdit({ id: tagId, tagName });
		} else {
			res = await postSiteTagAdd({ applicationId, tagName });
		};
		console.log(res);
		if (res.msg === formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.success.operation' })) {
			message.info(res.msg);
			this.siteTagCancel();
			this.getSiteTag();
		}
	};

	// 标签-问题
	getQuestionList = async (type) => {
		const { tagId, questionMove } = this.state;
		let id = questionMove.id == "" ? null : questionMove.id;
		let res = await getSiteTagQuestionList({ tagId });
		// console.log(res);
		if (res) {
			let idLists = res.map((e) => e.id);
			this.setState({
				questionList: res,
				questionIndex: type ? 1 : id ? idLists.indexOf(id) + 1 : 1,
				questionMove: {
					id: type
						? res.length > 0
							? res[0].id
							: null
						: id
							? id
							: res.length > 0
								? res[0].id
								: null,
				},
			});
		}
	};

	addTagQuestion = () => {
		this.setState({ siteTagQuestionVisible: true, questionId: null });
	};

	editTagQuestion = async (item) => {
		let res = await getSiteTagQuestionInfo({ id: item.id });
		console.log(res);
		if (res) {
			if (res.contentType == 1) {
				this.setState({
					questionId: res.id,
					problemsLink: res.contentType,
					questionName: res.content,
					siteTagQuestionVisible: true,
				});
			} else if (res.contentType == 2) {
				this.setState({
					questionId: res.id,
					problemsLink: res.contentType,
					linkName: res.content,
					linkHrefName: res.linkUrl,
					siteTagQuestionVisible: true,
				});
			}
		}
	};

	delTagQuestion = async (item) => {
		let res = await postSiteTagQuestionDel({ id: item.id });
		console.log(res);
		if (res.msg === formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.success.operation' })) {
			message.info(res.msg);
			this.getQuestionList();
		}
	};

	questionItem = (item) => {
		this.setState({
			questionMove: {
				id: item.target.data.id,
			},
			questionIndex: item.target.value,
		});
	};

	questionMove = async (type) => {
		let { questionList, questionMove } = this.state;
		if (questionList.length == 0) {
			message.error("暂无数据，不能移动");
			return false;
		};
		let questionIds = questionList.map((e) => e.id);
		let id = questionMove.id;
		let index = questionIds.indexOf(id);
		if (index == 0 && !type) {
			message.error("已经在首位，请勿操作");
			return false;
		} else if (index == questionIds.length - 1 && type) {
			message.error("已经在末尾，请勿操作");
			return false;
		};
		let obj = {
			id,
			targetId: type ? questionIds[index + 1] : questionIds[index - 1],
		};
		let res = await postSiteTagQuestionMove(obj);
		console.log(res);
		if (res.msg === formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.success.operation' })) {
			message.info(res.msg);
			this.getQuestionList();
		}
	};

	siteTagQuestionCancel = () => {
		this.setState({
			siteTagQuestionVisible: false,
			problemsLink: 1,
			questionName: "",
			linkName: "",
			linkHrefName: "",
		});
	};

	addQuestion = (e) => {
		this.setState({ questionName: e.target.value });
	};

	addLink = (e) => {
		this.setState({ linkName: e.target.value });
	};

	addLinkHref = (e) => {
		this.setState({ linkHrefName: e.target.value });
	};

	siteTagQuestionSubmit = async () => {
		const { problemsLink, tagId, questionName, linkName, linkHrefName, questionId } = this.state;
		let obj = null;
		if (problemsLink == 1) {
			obj = {
				tagId,
				contentType: problemsLink,
				content: questionName,
			};
		} else if (problemsLink == 2) {
			obj = {
				tagId,
				contentType: problemsLink,
				content: linkName,
				linkUrl: linkHrefName,
			};
		};
		let res = { data: false, msg: formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.error.operationFailed' }) };
		if (questionId) {
			obj.id = questionId;
			obj.tagId = undefined;
			res = await postSiteTagQuestionEdit(obj);
		} else {
			res = await postSiteTagQuestionAdd(obj);
		};
		console.log(res);
		if (res.msg === formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.success.operation' })) {
			message.info(res.msg);
			this.siteTagQuestionCancel();
			this.getQuestionList();
		}
	};

	isQuestion = e => {
		this.setState({ problemsLink: e.target.value });
	};

	// rgba转16进制
	rgbToHex = (val) => {  //RGB(A)颜色转换为HEX十六进制的颜色值
		var r, g, b, a, A,
			regRgba = /rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?\)/,    //判断rgb颜色值格式的正则表达式，如rgba(255,20,10,.54)
			rsa = val.replace(/\s+/g, '').match(regRgba);
		if (!!rsa) {
			r = parseInt(rsa[1]).toString(16);
			r = r.length == 1 ? '0' + r : r;
			g = (+rsa[2]).toString(16);
			g = g.length == 1 ? '0' + g : g;
			b = (+rsa[3]).toString(16);
			b = b.length == 1 ? '0' + b : b;
			a = (+(rsa[5] ? rsa[5] : 1)) * 100;
			A = (+(rsa[5] ? rsa[5] : 1)) * 100;
			return { hex: '#' + r + g + b, r: parseInt(r, 16), g: parseInt(g, 16), b: parseInt(b, 16), alpha: Math.ceil(a) };
		} else {
			return { hex: '无效', alpha: 100 };
		}
	}
	rgbaToHexColor(rgbaArray, alphaMaxVal = 1) {
		//补位警号
		return "#" + rgbaArray.map((chanel, index) => {
			let hexNum = "";
			if (index === 3) {
				//这是alpha通道
				hexNum = Number(Math.round(chanel * 255 / alphaMaxVal)).toString(16);
			} else {
				//普通通道直接转换
				hexNum = Number(chanel).toString(16)
			}
			return hexNum.length === 1 ? '0' + hexNum : hexNum;//这里解决了部分通道数字小于10的情况进行补位
		}).join("");
	}

	handleColorPickWin = () => {
		let { displayColorPickerWin } = this.state;
		this.setState({
			displayColorPickerWin: !displayColorPickerWin,
		});
	};

	render() {
		const { getFieldDecorator } = this.props.form;
		const formItemLayout = {
			labelCol: { span: 3 },
			wrapperCol: { span: 21 },
		};
		const tailFormItemLayout = {
			wrapperCol: {
				xs: {
					span: 24,
					offset: 0,
				},
				sm: {
					span: 22,
					offset: 2,
				},
			},
		};
		const {
			headPath,
			userHeadImg,
			kefuHeadImg,
			displayColorPicker,
			webWinColor,
			winLogo,
			entranceLogo,
			rightMessage,
			selected,
			leftTagTree,
			questionList,
			siteTagVisible,
			problemsLink,
			siteTagQuestionVisible,
			bubbleStyle,
			displayColorPickerWin,
			winColor,
      loginLogo
		} = this.state;
		const FormItemLayont = {
			labelCol: {
				sm: 24,
				md: 3,
			},
			wrapperCol: {
				sm: 24,
				md: 19,
			},
		};
		const tipsStyle = {
			fontSize: '13px', fontWeight: '400', color: 'rgba(51,51,51,0.5)', marginLeft: 5
		}
		const { channel,loginType } = this.props;

		return (
			<div className={styles.appearance_settings}>
				<Form {...formItemLayout}>
					<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.windowTitle' })}>
						{
							getFieldDecorator("winTitle", { rules: [{ required: true, message: formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.pleaseInputWindowTitle' }) }] })(
								<Input placeholder="请输入窗口标题" style={{ width: 300 }} />
							)
						}
					</Form.Item>
					{this.props.isllmCustom == 1 ? null : (
						<>
							<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.windowColor' })}>
								<div className={styles.flexColor}>
									<div className={styles.winColorBox}>
										<div
											style={{ background: winColor }}
											className={styles.webWinColor}
											onClick={this.handleColorPickWin}
										/>
										<span>{winColor}</span>
									</div>
									{displayColorPickerWin ? (
										<div style={{ position: "relative", zIndex: "2" }}>
											<div
												style={{
													position: "fixed",
													top: "0px",
													right: "0px",
													bottom: "0px",
													left: "0px",
												}}
												onClick={this.handleColorPickWin}
											/>
											<ChromePicker
												color={winColor}
												onChangeComplete={(color) => {
													this.setState({
														winColor: this.rgbaToHexColor([color.rgb.r, color.rgb.g, color.rgb.b, color.rgb.a]),
													});
												}}
											/>
										</div>
									) : null}
								</div>
							</Form.Item>
						</>
					)}
					<Form.Item label={formatMessage({ id: 'robotManagement.appearanceSettings.leftAppearance.windowLogoLabel' })}>
						{getFieldDecorator("winLogo", { valuePropName: "url", getValueFromEvent: this.normFile })(
							<Upload
								name='file'
								listType='picture'
								showUploadList={false}
								action='/cloud/file/upload'
								beforeUpload={this.beforeUpload}
								onChange={(info) => this.handleChangeImage(info, "winLogo")}
								accept='.png,.jpg'
							>
								<img src={winLogo} alt='file' className={styles.avator} />
								<Button size={"small"}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.selectFile' })}</Button>
							</Upload>
						)}
						<span style={tipsStyle}>{formatMessage({ id: 'robotManagement.appearanceSettings.leftAppearance.windowLogoTip' })}</span>
					</Form.Item>
					<Form.Item label={formatMessage({ id: 'robotManagement.appearanceSettings.leftAppearance.robotAvatarLabel' })}>
						{getFieldDecorator("headPath", { valuePropName: "url", getValueFromEvent: this.normFile })(
							<Upload
								name='file'
								listType='picture'
								showUploadList={false}
								action='/cloud/file/upload'
								beforeUpload={this.beforeUpload}
								onChange={(info) => this.handleChangeImage(info, "headPath")}
								accept='.png,.jpg'
							>
								<img src={headPath} alt='file' className={styles.avator} />
								<Button size={"small"}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.selectFile' })}</Button>
							</Upload>
						)}
						<span style={tipsStyle}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.avatar.customerServiceTips' })}</span>
					</Form.Item>
					{this.props.isllmCustom == 1 ? (
						<>
							<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.leftAppearance.userAvatar' })}>
								{getFieldDecorator("userHeadImg", { valuePropName: "url", getValueFromEvent: this.normFile })(
									<Upload
										name='file'
										listType='picture'
										showUploadList={false}
										action='/cloud/file/upload'
										beforeUpload={this.beforeUpload}
										onChange={(info) => this.handleChangeImage(info, "userHeadImg")}
										accept='.png,.jpg'
									>
										<img src={userHeadImg} alt='file' className={styles.avator} />
										<Button size={"small"}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.selectFile' })}</Button>
									</Upload>
								)}
								<span style={tipsStyle}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.avatar.customerTips' })}</span>
							</Form.Item>
						</>
					) : null}
					{this.props.isllmCustom == 1 ? null : (
						<>
							<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.bubbleStyle.label' })}>
								{getFieldDecorator("style", {
									initialValue: "1",
									valuePropName: "checked",
									rules: [
										{
											required: true,
											message: formatMessage({ id: 'digitalEmployees.appearanceSettings.bubbleStyle.selectPrompt' }),
										},
									],
								})(
									<div style={{ display: "flex", alignItems: "center" }}>
										<CustomRadio
											{...{
												id: "style1",
												name: "style",
												value: "1",
												content: formatMessage({ id: 'digitalEmployees.appearanceSettings.bubbleStyle.waterDrop' }),
												valueKey: `${bubbleStyle}`,
												onChange: res => {
													this.setState({ bubbleStyle: res })
												}
											}}
										/>
										<CustomRadio
											{...{
												id: "style2",
												name: "style",
												value: "2",
												content: formatMessage({ id: 'digitalEmployees.appearanceSettings.bubbleStyle.bubble' }),
												valueKey: `${bubbleStyle}`,
												onChange: res => {
													this.setState({ bubbleStyle: res })
												}
											}}
										/>
										<CustomRadio
											{...{
												id: "style3",
												name: "style",
												value: "3",
												content: formatMessage({ id: 'digitalEmployees.appearanceSettings.bubbleStyle.square' }),
												valueKey: `${bubbleStyle}`,
												onChange: res => {
													this.setState({ bubbleStyle: res })
												}
											}}
										/>
										<span style={tipsStyle}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.tips.nativePageInvalid' })}</span>
									</div>
								)}

							</Form.Item>
							<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.inputBubbleColor' })}>
								<div className={styles.flexColor}>
									<div className={styles.winColorBox}>
										<div
											style={{ background: webWinColor }}
											className={styles.webWinColor}
											onClick={this.handleColorPick}
										/>
										<span>{webWinColor}</span>
										<span style={tipsStyle}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.tips.nativePageInvalid' })}</span>
									</div>
									{displayColorPicker ? (
										<div style={{ position: "relative", zIndex: "2" }}>
											<div
												style={{
													position: "fixed",
													top: "0px",
													right: "0px",
													bottom: "0px",
													left: "0px",
												}}
												onClick={this.handleColorPick}
											/>
											<ChromePicker
												color={webWinColor}
												onChangeComplete={(color) => {
													this.setState({
														webWinColor: this.rgbaToHexColor([color.rgb.r, color.rgb.g, color.rgb.b, color.rgb.a]),
													});
												}}
											/>
										</div>
									) : null}
								</div>
							</Form.Item>
						</>
					)}
					{this.props.isllmCustom == 1 ? null : (
						<>
							<Divider style={{ marginTop: 0 }} />
							<span className={styles.titlep} style={{ background: "unset", padding: "0 10px" }}>
								<span>{formatMessage({ id: 'digitalEmployees.appearanceSettings.pcAppearance' })}</span>
							</span>
							<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.defaultWindowSize' })}>
								<div className={styles.winSize}>
									<img src={winSizeBig} />
									<img style={{ marginLeft: 20 }} src={winSizeSmall} />
								</div>
								{
									getFieldDecorator("winSize")(
										<Radio.Group>
											<Radio style={{ marginLeft: 24, marginTop: 10 }} value={1}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.windowSize.large' })}</Radio>
											<Radio style={{ marginLeft: 35, marginTop: 10 }} value={2}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.windowSize.small' })}</Radio>
										</Radio.Group>
									)
								}
							</Form.Item>
							<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.sidebar.displayStatus' })}>
								{getFieldDecorator("sideShow", {
									valuePropName: "checked",
									initialValue: true,
									})(<Switch checkedChildren={formatMessage({ id: 'digitalEmployees.appearanceSettings.enable' })} unCheckedChildren={formatMessage({ id: 'digitalEmployees.appearanceSettings.disable' })} />)}
								<span className={styles.logoTips} style={{ marginLeft: 10 }}>
									{formatMessage({ id: 'digitalEmployees.appearanceSettings.tips.sidebarDisplay' })}
								</span>
							</Form.Item>
							<Form.Item className='antZdy' label={formatMessage({ id: 'digitalEmployees.appearanceSettings.sidebar.infoDisplay' })}>
								<Form.Item>
									<div style={{ width: "520px" }}>
										<Editor
											content={rightMessage}
											name='content'
											id='content'
											width='275'
											ref={(r) => (this.ueditor = r)}
											zIndex={2}
										/>
									</div>
								</Form.Item>
							</Form.Item>
							<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.sidebar.linksQuestions' })}>
								<div className={LeftStyles.siteTag}>
									<div style={{ width: "180px" }}>
										<Menu
											theme='light'
											mode='inline'
											onClick={(item) => this.menuSelect(item)}
											selectedKeys={selected}
											style={{
												height: "100%",
												minHeight: "335px",
												position: "relative",
											}}
										>
											{leftTagTree.map((treeItem, index) => {
												return (
													<Menu.Item key={treeItem.id + "-" + index} id={treeItem.id} name={treeItem.tagName}>
														<div style={{ display: "flex", justifyContent: "space-between" }}>
															<span>{treeItem.tagName}</span>
															<div>
																<img src={staticPath + "/appImg/edit.png"} onClick={(e) => this.editTag(treeItem)} />
															</div>
														</div>
													</Menu.Item>
												);
											})}
											<div style={{ height: "24px", lineHeight: "24px", padding: "0 16px" }}>
												<span style={{ color: '#3E5BFF', cursor: 'pointer' }} onClick={this.addSiteTag}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.addTag' })}</span>
											</div>
											<div className={LeftStyles.tagBottom}>
												<Button type='link' onClick={() => this.tagMove(false)}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.moveUp' })}</Button>
												<Button type='link' onClick={() => this.tagMove(true)}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.moveDown' })}</Button>
												<Button type='link' onClick={this.siteTagDel}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.delete' })}</Button>
											</div>
										</Menu>
									</div>
									<div className={LeftStyles.rightQuestionList}>
										<div className={LeftStyles.content}>
											<Radio.Group style={{ width: "100%" }} onChange={this.questionItem} value={this.state.questionIndex}>
												{questionList.map((item, index) => {
													return (
														<Radio key={index} value={index + 1} style={{ display: "block" }} data={item}>
															<span style={{ marginBottom: 0, lineHeight: "48px" }}>
																<span className={LeftStyles.questionListName}>
																	{item.contentType == 1 ? (
																		<Icon type='question-circle' />
																	) : (
																		""
																	)}
																	{item.contentType == 2 ? (
																		<Icon type='link' />
																	) : (
																		""
																	)}
																	<span className={LeftStyles.questionListText}>{item.content}</span>
																</span>
																<img
																	src={staticPath + "/appImg/remove.png"}
																	onClick={(e) => this.delTagQuestion(item)}
																	className={LeftStyles.siteTagIcon}
																/>
																<img
																	src={staticPath + "/appImg/edit.png"}
																	onClick={(e) => this.editTagQuestion(item)}
																	className={LeftStyles.siteTagIcon}
																/>
															</span>
														</Radio>
													);
												})}
											</Radio.Group>
											<div className={LeftStyles.tagBottomRight}>
												<img src={staticPath + "/appImg/top.png"} style={{ marginRight: 16 }} onClick={() => this.questionMove(false)} />
												<img src={staticPath + "/appImg/down.png"} style={{ marginRight: 16 }} onClick={() => this.questionMove(true)} />
												<img src={staticPath + "/appImg/add.png"} style={{ marginRight: 16 }} onClick={this.addTagQuestion} />
											</div>
										</div>
									</div>
								</div>
							</Form.Item>
						</>
					)}

          {
            loginType == 1 ? (
              <div>
                <Divider style={{ marginTop: 0 }} />
                <span className={styles.titlep} style={{ background: "unset", padding: "0 10px" }}>
                  <span>{formatMessage({ id: 'digitalEmployees.appearanceSettings.pcAppearance' })}</span>
                </span>
                <Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.login.logo' })}>
                  {getFieldDecorator("loginLogo", { valuePropName: "url", getValueFromEvent: this.normFile })(
                    <Upload
                      name='file'
                      listType='picture'
                      showUploadList={false}
                      action='/cloud/file/upload'
                      beforeUpload={this.beforeUpload}
                      onChange={(info) => this.handleChangeImage(info, "loginLogo")}
                      accept='.png,.jpg'
                    >
                      <img src={loginLogo} alt='file' style={{maxWidth:160,marginRight:10}} />
                      <Button size={"small"}>选择文件</Button>
                    </Upload>
                  )}
                  <span style={tipsStyle}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.login.logoTips' })}</span>
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.login.firstTitle' })}>
                  {
                    getFieldDecorator("loginHeadline", { rules: [{ required: true, message: formatMessage({ id: 'digitalEmployees.appearanceSettings.login.firstTitleRequired' }) }] })(
                      <Input placeholder={formatMessage({ id: 'digitalEmployees.appearanceSettings.login.firstTitlePlaceholder' })} style={{ width: 400 }} />
                    )
                  }
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.login.secondTitle' })}>
                  {
                    getFieldDecorator("loginSubtitle", { rules: [{ required: true, message: formatMessage({ id: 'digitalEmployees.appearanceSettings.login.secondTitleRequired' }) }] })(
                      <Input placeholder={formatMessage({ id: 'digitalEmployees.appearanceSettings.login.secondTitlePlaceholder' })} style={{ width: 400 }} />
                    )
                  }
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.login.description' })}>
                  {
                    getFieldDecorator("loginDescription", { rules: [{ required: true, message: formatMessage({ id: 'digitalEmployees.appearanceSettings.login.descriptionRequired' }) }] })(
                      <Input.TextArea placeholder={formatMessage({ id: 'digitalEmployees.appearanceSettings.login.descriptionPlaceholder' })} style={{ width: 400 }} autosize={{minRows:3,maxRows:10}}  />
                    )
                  }
                </Form.Item>
              </div>
            ) : ''
          }
				</Form>
				<Divider style={{ marginTop: 0 }} />
				<Modal
					title={formatMessage({ id: 'digitalEmployees.appearanceSettings.addTag' })}
					onCancel={this.siteTagCancel}
					visible={siteTagVisible}
					destroyOnClose
					footer={[
						<Button onClick={this.siteTagCancel}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.cancel' })}</Button>,
						<Button type='primary' onClick={this.tagSubmit}>{formatMessage({ id: 'digitalEmployees.appearanceSettings.confirm' })}</Button>,
					]}
				>
					<Form {...FormItemLayont}>
						<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.tagName' })}>
							<Input onChange={this.addTag} value={this.state.tagName} />
						</Form.Item>
					</Form>
				</Modal>
				<Modal
					title={formatMessage({ id: 'digitalEmployees.appearanceSettings.addQuestionLink' })}
					onCancel={this.siteTagQuestionCancel}
					visible={siteTagQuestionVisible}
					destroyOnClose
					footer={[
						<Button onClick={this.siteTagQuestionCancel}>取消</Button>,
						<Button type='primary' onClick={this.siteTagQuestionSubmit}>确定</Button>,
					]}
				>
					<Form {...FormItemLayont}>
						<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.addType' })}>
							<Radio.Group onChange={this.isQuestion} value={problemsLink}>
								<Radio style={{ marginLeft: 24, marginTop: 10 }} value={1}>
									<span>{formatMessage({ id: 'digitalEmployees.appearanceSettings.question' })}</span>
									<Tooltip placement='topLeft' title={formatMessage({ id: 'digitalEmployees.appearanceSettings.question.tooltip' })}>
										<Icon
											type='question-circle'
											style={{ color: "#66666666", margin: "0 2px" }}
										/>
									</Tooltip>
								</Radio>
								<Radio style={{ marginLeft: 35, marginTop: 10 }} value={2}>
									<span>{formatMessage({ id: 'digitalEmployees.appearanceSettings.link' })}</span>
									<Tooltip placement='topLeft' title={formatMessage({ id: 'digitalEmployees.appearanceSettings.link.tooltip' })}>
										<Icon
											type='question-circle'
											style={{ color: "#66666666", margin: "0 2px" }}
										/>
									</Tooltip>
								</Radio>
							</Radio.Group>
						</Form.Item>
						{problemsLink == 1 ? (
							<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.question' })}>
								<Input onChange={this.addQuestion} value={this.state.questionName} />
							</Form.Item>
						) : (
							""
						)}
						{problemsLink == 2 ? (
							<>
								<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.linkText' })}>
									<Input onChange={this.addLink} value={this.state.linkName} />
								</Form.Item>
								<Form.Item label={formatMessage({ id: 'digitalEmployees.appearanceSettings.linkUrl' })}>
									<Input onChange={this.addLinkHref} value={this.state.linkHrefName} />
								</Form.Item>
							</>
						) : (
							""
						)}
					</Form>
				</Modal>
			</div>
		);
	}
}

export default Form.create()(LeftAppearance);
